<template>
    <el-container>
        <el-main class="wrapper">
            <v-breadcrumb v-bind:breadcumb="breadcumb"></v-breadcrumb>
            <section class="panel"
                     :style="{height: mainHeight+'px'}">
                <div class="panel-body">
                    <div class="bh-btn-group">
                        <el-button @click="list" type="primary" icon="fa fa-refresh"
                                   size="small"> 刷新
                        </el-button>
                        <div class="bh-search">
                            <el-select size="medium" v-model="searchCate.id" placeholder="选择管理员(所有)"
                                       @change="changeSearchCate">
                                <!--<el-option label="综合统计" :value="null"></el-option>-->
                                <el-option v-for="(item, index) in admins" :key="index" :label="item.nickname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-date-picker
                                    v-model="dateValue"
                                    align="right"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions1" @change="pickerChange">
                            </el-date-picker>
                        </div>
                    </div>
                    <div id="main" style="width: 100%;height: 650px;"></div>
                    <!--'视频浏览次数','有效分享数','分享总数'-->
                    <el-tag type="danger">视频浏览次数:{{visitTotal.pv}}</el-tag>
                    <el-tag type="info">有效分享数:{{visitTotal.uv}}</el-tag>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import echarts from 'echarts';
    import vBreadcrumb from '../layout/breadcrumb.vue';
    import {VideoCountList,ManageList} from '../../utils/axios';
    import {formatDate} from '../../utils/date';
    export default {
        components:{vBreadcrumb},
        data(){
            return {
                breadcumb:[{name: "视频统计数据分析"},],//当月浏览量统计、当天览量统计、分享、评论
                charts: '',
                visitPv: [],//视频浏览次数
                visitUv: [],//视频点赞
                visitTotal:{
                    pv:0,
                    uv:0
                },
                date:[],//日期
                searchCate: {id:null,start:null,end:null},//筛选
                admins: [],//顶级分类
                pickerOptions1: {
                    shortcuts: [{
                        text: '所有',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '对比昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dateValue: '',
            }
        },
        activated(){
            this.$store.dispatch('setActive', '/videocount');
            this.getAdmins();
            this.list();
        },
        mounted(){
            // this.$nextTick(function() {
            //     this.drawPie('main')
            // })
        },
        computed: {
            ...mapGetters(['active','mainHeight','loading'])
        },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    legend: {
                        data:['视频浏览次数','有效分享数']
                    },
                    title: {
                        text: '视频统计数据分析'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'视频浏览次数',
                            type:'line',
                            stack: '视频浏览次数',
                            data:this.visitPv,
                            // label: {normal: {show: true, position: 'top'}},
                        },
                        {
                            name:'有效分享数',
                            type:'line',
                            stack: '有效分享数',
                            data:this.visitUv,
                            // label: {normal: {show: true, position: 'top'}},
                        }
                    ]
                })
            },
            //获取列表
            list(){
                this.$store.dispatch('setLoading', true);
                this.visitTotal.pv = 0;
                this.visitTotal.uv = 0;
                VideoCountList({params: this.searchCate}).then((response)=>{
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.visitPv = [];
                        this.visitUv = [];
                        this.date = [];
                        response.data.filter((item)=>{
                            this.visitPv.push(item.views);
                            this.visitUv.push(item.share_in);
                            this.date.push(item.date);
                            this.visitTotal.pv += parseInt(item.views);
                            this.visitTotal.uv += parseInt(item.share_in);
                        });
                        this.drawPie('main')
                    }
                })
            },
            //条件搜索
            changeSearchCate() {
                this.list();
            },
            pickerChange() {

                var dateArr = this.dateValue;
                this.searchCate.start = formatDate(dateArr[0], 'yyyy-MM-dd');
                this.searchCate.end = formatDate(dateArr[1], 'yyyy-MM-dd');

                this.list();
            },
            //获取管理员
            getAdmins() {
                ManageList().then((response)=>{
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.admins = response.data;
                    }
                })
            },
        },
    }
</script>
